<template>
  <div class="">
    {{data}}
    {{tableInfo.data}}
    {{groupId}}
    <el-tree
      :props="props"
      :data="tableInfo.data"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :render-content="renderContent">
    </el-tree>


    <div class="filter-container">
      <el-button class="filter-item" icon="el-icon-circle-plus-outline" @click="showDialog">新增</el-button>
    </div>
    <el-table
      :data="tableInfo.data"
      border
      style="width:100%"
      class="init_table">
      <el-table-column
        align="center"
        width="50"
        type="index"
        label="序号">
      </el-table-column>
      <el-table-column
        align="center"
        prop="userName"
        label="姓名"
        :min-width="tableInfo.minWidth">
      </el-table-column>

      <el-table-column
        align="center"
        prop="userIdCard"
        label="身份证"
        :min-width="tableInfo.minWidth">
      </el-table-column>

      <el-table-column
        align="center"
        width="200"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleRemoveData(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新增成员" :visible.sync="dialogVisible" width="500px" top="10vh" modal="false" :modal="false">
      <el-form ref="submitForm" :rules="rules" :model="submitData" label-position="right"
               label-width="100px">
        <el-row>
          <el-col :span="22">
            <el-form-item label="成员姓名：" prop="userId">
              <el-select style="width:100%"
                         v-model="submitData.userId"
                         filterable
                         remote
                         reserve-keyword
                         :remote-method="remoteMethod"
                         :loading="selectLoading">
                <el-option
                  v-for="item in selectUser"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddData">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {listCareUser} from '@/api/ele/careUser'
  import ele from '@/api/ele'
  import {handleRequest} from '@/utils/system'

  export default {
    name: 'CareMemberComponent',
    props: {
      groupId: {
        type: String
      }
    },
    data: () => ({
      dialogVisible: false,
      tableInfo: {data: []},
      props: {
        label: 'name',
      },
      submitData: {
        userId: null,
        groupId: null,
      },
      rules: {
        userId: [{required: true, message: '不能为空', trigger: 'change'}],
      },
      selectUser: [],
      selectLoading: false,
      data: [{
        id: 1,
        name: '一级 1',
        children: [{
          id: 4,
          name: '二级 1-1',
        }]
      }]

    }),
    watch: {
      groupId(val) {
        console.log(val);
        console.log(this);
        this.refreshTable();
      }
    },
    mounted() {
      this.methods.refreshTable();
    },
    methods: {
      append(data) {
        const newChild = {id: id++, label: 'testtest', children: []};
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },

      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },

      renderContent(h, {node, data, store}) {
        // IDEA不支持jsx语法解决办法 步骤：file>settings>Languages and Frameworks -> JavaScript -> language version下拉框里选React JSX
        // return (
        //   <span class="custom-tree-node">
        //     <span>{node.label}</span>
        //     <span>
        //       <el-button size="mini" type="text" on-click={() => this.append(data)}>sddsdsd</el-button>
        //       <el-button size="mini" type="text" on-click={() => this.remove(node, data)}>Delete</el-button>
        //     </span>
        //   </span>);
      }
    },
    remoteMethod(query) {
      if (query !== '') {
        this.selectLoading = true
        handleRequest({
          method: listCareUser,
          data: {
            name: query,
            pageNum: 1,
            pageSize: 1000
          },
          successCall: (data) => {
            this.selectUser = data.rows
            this.selectLoading = false
          }
        })
      } else {
        this.selectUser = [];
      }
    },
    resetSubmitData() {
      this.submitData = {
        userId: null,
        groupId: this.groupId
      }
    },
    showDialog() {
      this.resetSubmitData()
      this.dialogVisible = true
      this.selectUser = []
      this.$nextTick(() => {
        this.$refs['submitForm'].clearValidate()
      })
    },
    handleAddData() {
      this.$refs['submitForm'].validate((valid) => {
        if (valid) {
          handleRequest({
            method: ele.careMember.add,
            data: this.submitData,
            operateType: "新增",
            warnAlertShow: true,
            successAlertShow: true,
            failAlertShow: true,
            successCall: () => {
              this.dialogVisible = false;
              this.refreshTable();
            }
          })
        }
      })
    }
    ,
    handleRemoveData(id) {
      handleRequest({
        method: ele.careMember.removeById,
        data: {id: id},
        operateType: "删除",
        warnAlertShow: true,
        successAlertShow: true,
        failAlertShow: true,
        successCall: () => {
          this.dialogVisible = false;
          this.refreshTable();
        }
      })
    },
    refreshTable() {
      handleRequest({
        method: ele.careMember.listByGroupId,
        data: {groupId: this.groupId},
        successCall: (data) => {
          this.tableInfo.data = data
        }
      })
    }
  }

</script>
<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
